"Responsive Grid System "
Bootstrap 4.1.1 Snippet by Naveen Mandwariya

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<section class="service-section">
<div class="page-width">
<div class="custom-row">
<div class="custom-col">
<div class="heading-title wow fadeInUp" data-wow-delay="0s">
<p class="tagline"> Section Subtitle </p>
<h2> Centered Content with tiles </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
</div>
<div class="customrow">
<div class="custom-col-4">
<div class="service-box-main wow fadeInUp" data-wow-delay=".1s">
<div class="service-image">
<img src="https://i.ibb.co/tQgJPYL/serv-1.webp" alt="">
</div>
<div class="service-content">
<h3> Tile 01 </h3>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting .</p>
</div>
</div>
</div>
<div class="custom-col-4">
<div class="service-box-main wow fadeInUp" data-wow-delay=".3s">
<div class="service-image">
<img src="https://i.ibb.co/sCCQ15s/serv-2.webp" alt="">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
box-sizing: content-box;
}
body{
margin:0;
font-family: sans-serif;
}
p{
color:#616161;
}
.page-width {
max-width: 1170px;
margin: 0 auto;
}
.service-box-main{
margin-top: 1rem;
}
.service-box-main h3{
text-align: center;
text-transform: uppercase;
font-weight: 400;
color: #ececec;
font-size: 16px;
}
.service-box-main img{
width: 100%;
background:#777;
transition: 0.5s ease;
}
.service-box-main :hover img {
transform: scale(1.2);
transition: 0.5s ease;
}
.service-image {
overflow: hidden;
}
.custom-btn {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
new WOW().init();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: